<template>

  <div class="back" style=" height: calc(100vh - 100px)">

    <div style="padding-top: 20px;margin-left: 10vw;">

      <el-form :model="queryParams" ref="queryForm" :inline="true">
        <el-form-item prop="name">
          <el-input
              v-model="queryParams.keyname"
              placeholder="请输入关键字"
              clearable
              :input-style="{ height: '60px' }"
              style="width: 400px;margin-top: 10px"
              size="medium"
              @keyup.enter.native="getList"
          />
        </el-form-item>
        <el-form-item>
          <div style="display: flex">
            <div @click="getList" title="搜索" style="margin-right: 15px;cursor: pointer;"><img src="@/assets/search.png" style="width: 60px;height: 60px"></div>
            <div @click="resetQuery" title="重置" style="cursor: pointer"><img src="@/assets/chong.png" style="width: 60px;height: 60px"></div>
          </div>

        </el-form-item>
      </el-form>
      <div style="display: flex;justify-content: center;width: 100vw">

        <div class="leftImg">
              <el-image
                  :src="leftImg"
                  style="width: 100%;height: 100%"
              >

              </el-image>
        </div>

        <div class="card-container">
          <div v-for="(item, index) in announcementList" :key="index" class="card-item">


            <el-card shadow="hover">
              <div style="display: flex; justify-content: space-between; align-items: center; padding: 10px;">

                <div
                    style="flex: 1; font-size: 12px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                  <span>{{ item.createTime }}</span>
                </div>

                <div
                    style="flex: 1; text-align: center; font-size: 24px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin: 0 auto;">
                  <span>{{ item.title }}</span>
                </div>
                <div
                    style="flex: 1; text-align: right; font-size: 24px; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                  <el-button type="danger" @click="todetil(item.id)">查看详情</el-button>

                </div>
              </div>
            </el-card>
          </div>
        </div>
      </div>


      <el-pagination
          style="position: absolute;bottom: 5vh;"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :current-page="queryParams.pageNum"
          :page-size="queryParams.pageSize"
          :page-sizes="[5,10,15]"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
      />


    </div>
  </div>
</template>

<script>

import {listAnnouncement} from "@/api/project/announcement";
import leftImg from "../../assets/leftImg.jpg";

export default {
  name: "index",
  data() {
    return {
      open: false,
      form: {},
      leftImg: leftImg,
      announcementList: [],
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        keyname: "",
      },

    }
  },
  created() {
    // console.log("this.$route.query.type",this.$route.query.type)

    this.getList()

  },
  methods: {

    getDetail(content) {


    },
    getList() {

      listAnnouncement(this.queryParams).then(response => {

        if (this.queryParams.keyname) {
          let keyname = this.queryParams.keyname
          let data = response.data.filter(data => data.goodsType == this.$route.query.type && (data.title.indexOf(keyname) > -1));
          // const data = response.data;
          let list, start, end
          start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize
          end = start + this.queryParams.pageSize
          list = data.filter((item, index) => {
            return index >= start && index < end
          })

          this.announcementList = list;
          this.total = data.length;
        } else {
          let list, start, end
          start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize
          end = start + this.queryParams.pageSize
          // const data = response.data.filter(data => data.goodsType == this.$route.query.type );
          const data = response.data;
          list = data.filter((item, index) => {
            return index >= start && index < end
          })
          this.announcementList = list;
          this.total = data.length;
        }


      });


    },
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 5,
        keyname: null,
      }
      this.getList()

    },
    handlePageChange(currentPage) {
      this.queryParams.pageNum = currentPage
      this.getList()
    },
    handleSizeChange(pageSize) {
      this.queryParams.pageSize = pageSize
      this.getList()
    },
    todetil(e) {

      this.$router.push({path: '/announcement/detail', query: {id: e}});

    },
  }

}
</script>

<style scoped>
.card-container {
  width: 50vw;
  height: 63vh;
}

.card-item {
  width: 35vw;

  margin-bottom: 20px; /* 行间距 */
}


.back {
  background-image: url('../../assets/bg.png');
  background-size: cover;
}

.leftImg {
  margin-right: 30px;
  width: 30vw;
  height: 65vh;
}

.app-container {
  background-image: url('../../assets/back.jpg');
  background-size: 100%; /* 确保背景图片覆盖整个容器 */
  /*height: 100%; !* 设置高度为视口高度的100% *!*/
  min-height: 100vh;
  display: flex;


}
</style>
